

<template>
    <view class="groupMembers">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="
                background: #fff;
                width: 750rpx;
                position: fixed;
                z-index: 100;
            "
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="border-bottom: none"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title d-flex a-center j-between">群黑名单</view>
            <view class="right_box">
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>

        <view
            class="search_box d-flex a-center j-center"
            :style="{ top: `calc(  100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view class="search d-flex a-center">
                <i
                    class="tmicon tmicon-search"
                    style="color: #ccc; font-size: 30rpx"
                ></i>
                <input
                    type="text"
                    class="inp"
                    @input="searchAddressBook"
                    v-model="searchText"
                    placeholder="群成员/好友昵称"
                    placeholder-style="color:#ccc;font-size:25rpx;"
                />
            </view>
        </view>

        <scroll-view
            :scroll-y="true"
            class="content"
            :style="{ top: `calc(  190rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view class="box_view">
                <!-- <view class="title d-flex d-r a-center j-between"
                    ><text>黑名单</text></view
                > -->
                <view class="list">
                    <view
                        class="psr row d-flex d-r a-center"
                        v-for="f in blackList"
                        :key="f.userId"
                        @tap="toggleCheck(f)"
                    >
                        <view class="head_box psr">
                            <userhead
                                width="95"
                                height="95"
                                :saveKey="f.userId"
                                :isVip="f.isVip"
                                :src="f.userPhoto"
                            />
                            <!-- <cacheimg class="head" :src="f.profile.avatar" :saveKey="f.userID"></cacheimg>
                                <image
                                    v-if="f.profile.level===2"
                                    class="vip_icon w-center"
                                    src="/static/svip.png"
                                ></image>
                                <image
                                    v-if="f.profile.level===1"
                                    class="vip_icon w-center"
                                    src="/static/vip.png"
                                ></image> -->
                        </view>
                        <view class="name"
                            ><rich-text :nodes="f.nodes"></rich-text
                        ></view>
                        <view class="line"></view>

                        <view class="check_box d-flex a-center j-center h-center">
                            <image v-if="isSelected(f.userId)" class="checkImg" src="@/static/image/diet-menu-check-true.png"></image>
							<image v-else class="checkImg" src="@/static/image/sports-menu-check-false.png"></image>
                        </view>
                    </view>
                </view>
            </view>

            <view v-if="!all_blackList.length"  class="nodata" style="position:absolute;top:0;bottom:0;width:750rpx;">
                    <image
                        class="nodata-img"
                        src="/static/img/nodata.png"
                        alt=""
                    />

                    <text class="text">竟然什么都没有~</text>
            </view>

        </scroll-view>

        <view class="bottom_box d-flex a-center j-between">
            <scroll-view
                class="selected"
                :scroll-x="true"
                :scroll-y="false"
                :show-scrollbar="false"
                :enable-flex="true"
            >
                <view class="selected_box">
                    <cacheimg
                        class="userhead"
                        style="border: 1px solid #ddd"
                        v-for="item in selected"
                        :saveKey="item.userId"
                        :src="item.userPhoto"
                        mode="aspectFill"
                    ></cacheimg>
                </view>
            </scroll-view>

            <view class="right_area d-flex d-c">
                <view
                    @tap="handleMoveOut"
                    class="btn1 d-flex a-center j-center"
                    :class="{ disabled: !selected.length }"
                >
                    移出{{ selected.length }}人
                </view>
            </view>
        </view>

    </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onReady, onShow, onLoad } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { getGroupBlackList,removeGroupBlacklist } from "@/api/api";
import { getFriendList } from "@/hooks/imHooks";
import cacheimg from "@/components/cacheimg.vue";
import { imStore as imStore1 } from "@/store/imStore";
import userhead from "@/components/userhead.vue";
import { wait,showLoading,closeLoading } from "@/utils/utils"

const imStore: any = imStore1();

const goUserDetail = (userId: any) => {
    uni.navigateTo({
        url: `/pages/personalCenter/personalCenter?userId=${userId}`,
    });
};

const searchText = ref("");
const blackList = ref([]);
const all_blackList = ref([]);
const all_friends = ref([]);
const userData: any = userDataStore();
const systemInfo: any = systemInfoStore();
const selected = ref([]);
const groupId = ref('');


const  goBack = () => {
	uni.navigateBack();
};

const toggleCheck = (f) => {

    const index = selected.value.findIndex((item) => item.userId === f.userId);
    if (index === -1) {
        selected.value.push(f);
    } else {
        selected.value.splice(index, 1);
    }
};

const isSelected = (id) => {
    return selected.value.some((item) => item.userId === id);
};

const getFriends = async () => {
    const res: any = await getFriendList();
    const { code, data } = res;
    if (code !== 0) {
        return;
    }
    imStore.setFriends(data);
};

const groupDetail = ref({});


const getDetail = async (groupId: string) => {
    const res: any = await getCircleDetail({ groupId });
    const { flag, data } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "获取群资料失败",
            duration: 1500,
        });
        return;
    }


    groupDetail.value = data;
};


const initData = () => {
    const friends = imStore.friends;



    all_blackList.value.forEach(item=>{
        friends.forEach((f:any)=>{
            if(f.userID === item.userId){
                item.remark = f.remark;
            }
        })
    })



    blackList.value = all_blackList.value.map((item) => {
        let color = "#333";
        if (item.isVip) {
            color = "#F19945";
        }

        return {
            ...item,
            nodes: `<div style="color:${color};font-weight:400;">${
                item.remark || item.userName
            }</div>`,
        };
    });
};

const searchAddressBook = () => {
    if (!searchText.value) {
        initData();
        return;
    }

    blackList.value = all_blackList.value.filter((item) => {
        const str = item.remark || item.userName;
        if (str.toLowerCase().search(searchText.value.toLowerCase()) !== -1) {
            return true;
        } else {
            return false;
        }
    });

    matchTextHighLight();
};

const matchTextHighLight = () => {
    const reg = new RegExp(searchText.value, "gi");
    blackList.value = blackList.value.map((item) => {
        const obj = {
            ...item,
        };
        // const str = `<div style="color:#555;">${item.profile.nick}</div>`;
        const str = item.remark || item.userName;
        const nodes = `<div style="color:#555;font-weight:400;">${str.replace(
            reg,
            (s: any) => {
                return `<span style="color:#23e2a6">${s}</span>`;
            }
        )}</div>`;
        obj.nodes = nodes;
        return obj;
    });
};

const GetGroupBlackList = async (groupId: string) => {
    const res: any = await getGroupBlackList({ groupId });
    const { flag, data } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "获取黑名单失败",
            duration: 1500,
        });
        return;
    }

    console.log('all_blackList.value')
    console.log(data.list)

    all_blackList.value = data.list;


};


let loading = false;

const handleMoveOut = async() => {

    if(loading){
        return
    }

    showLoading();

    loading = true;

    

    if(!selected.value.length){
        uni.showToast({
            icon: "none",
            title: "请选择",
            duration: 1500,
        });

        closeLoading();

        loading = false;
        return
    }

    const params = {
        groupId:groupId.value,
        ids:selected.value.map(item=>item.userId)
    }

    const res = await removeGroupBlacklist(params)



    closeLoading();
    loading = false;

    const {flag} = res;

    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: "移除黑名单失败，请稍后再试",
            duration: 1500,
        });
        return
    }

    selected.value = [];


    uni.showToast({
            icon: "success",
            title: "已移除",
            duration: 1500,
    });




    Promise.all([GetGroupBlackList(groupId.value), getFriends()]).then(() => {
            initData();
    });







};

onReady(() => {});

onLoad((option: any) => {

    console.log(option.groupId)

    if (option.groupId) {
        groupId.value = option.groupId
        Promise.all([GetGroupBlackList(option.groupId), getFriends()]).then(() => {
            initData();
        });
    }
});

onShow(() => {});
</script>

<style lang="scss" scoped>
.groupMembers {
    width: 750rpx;
    height: 100vh;
    background: #fff;

    .search_box {
        position: fixed;
        width: 750rpx;
        background: #fff;
        padding-bottom: 20rpx;

        .search {
            width: 690rpx;
            height: 70rpx;
            border-radius: 10rpx;
            background: #f5f5f5;
            padding: 0 30rpx;
            .inp {
                width: 570rpx;
                margin-left: 20rpx;
                font-size: 25rpx;
            }
        }
    }

    .bottom_box {
        position: fixed;
        width: 750rpx;
        height: 120rpx;
        left: 0;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        background-color: #fff;
        padding: 0 30rpx;
        .selected {
            height: 80rpx;
            width: 460rpx;
            white-space: nowrap;

            .selected_box {
            }

            .userhead {
                width: 80rpx;
                height: 80rpx;
                border-radius: 10rpx;
                margin-right: 10rpx;
            }
        }

        .right_area {
            .btn1 {
                padding: 0 30rpx;
                height: 80rpx;
                background: linear-gradient(318deg, #64f1c5 0%, #29dba3 100%);
                color: #fff;
                font-size: 32rpx;
                border-radius: 20rpx;
                &.disabled {
                    color: #999;
                    background: #eee;
                }

                &:active{
                    opacity: .7;
                }
            }
        }
    }

    .content {
        position: absolute;
        width: 750rpx;
        left: 0;
        right: 0;
        bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
        bottom: calc(env(safe-area-inset-bottom) + 120rpx);
        background: #f5f5f5;

        .box_view {
            margin-top: 20rpx;
            background: #fff;
            .title {
                height: 60rpx;
                font-size: 28rpx;
                color: #333;
                font-weight: 400;
                padding: 0 30rpx;
            }
            .list {
            }
            .row {
                position: relative;
                padding: 0 30rpx;
                gap: 20rpx;
                height: 110rpx;
                .head_box {
                    width: 95rpx;
                    height: 95rpx;
                    .vip_icon {
                        width: 97rpx;
                        height: 43rpx;
                        bottom: -10rpx;
                    }
                }
                .head {
                    width: 95rpx;
                    height: 95rpx;
                    border-radius: 50%;
                    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
                    border: 3px solid #ffffff;
                }
                .name {
                    margin-left: 10rpx;
                    font-size: 34rpx;
                    color: $slim-text5;
                    &:active {
                    }
                }

                &:active {
                    background: #f5f5f5;
                }
                .line {
                    position: absolute;
                    height: 1px;
                    width: 600rpx;
                    left: 130rpx;
                    background-color: #f5f5f5;
                    bottom: 0;
                }
                .joined {
                    color: #aaa;
                    font-size: 28rpx;
                }
                .check_box {
                    width: 32rpx;
                    height: 32rpx;
                    right: 30rpx;
                    overflow:hidden;
                    .checkImg {
                        width: 32rpx;
                        height: 32rpx;
                    }
                }

                // &::before {
                //     content: "";
                //     position: absolute;
                //     left: 110rpx;
                //     right: 20rpx;
                //     bottom: 0;
                //     height: 1px;
                //     background-color: #f5f5f5;
                // }
            }
        }
    }
}
</style>
